<!-- 作者卡片 -->
<template>
  <div class="author-card">
      <div class="bgi" >
           <img
            src="@/assets/icon1/sixin.svg"
            alt="私信"
            title="私信"
            style="width:30px;"
            id="sixin"
          >
      </div>
      <div class="mess">
          <img src="@/images/icon.jpg" width="60px" id="touxiang">
          <span>ice</span>
          
         
          <my-button buttonTitle="关注"></my-button>
      </div>
      <div class="fans-focus">
          <span>关注199人</span>
          <span>/</span>
          <span>粉丝200人</span>
          <span>/</span>
          <span>广州市</span>
      </div>
      <br>
     <span id="sign">我是一只小小鸟</span>

  </div>
</template>

<script>
import MyButton from './myButton.vue'
export default {
  data () {
    return {
    };
  },
  components:{
      
        MyButton,
        
        
    },
  methods: {}
}

</script>
<style lang='scss' scoped>
.author-card{
    
    margin-bottom:20px;
    width: 300px;
    height: auto;
    .bgi{
        height: 120px;
        background-image:  url("../../images/4.png");
        background-size: 100% auto;
        background-position: fixed;
        
        #sixin {
          float:right;
          margin-top:80px;
          margin-right:10px;
          cursor: pointer;
          transition: all 0.6s;
        }
        #sixin:hover {
          transform: scale(1.4);
        }    
        
    }
    .mess{
        margin-top:10px;
        display:flex;
        justify-content:space-between;
        margin-left: 100px;
        #touxiang{
            position:absolute;
            border-radius: 50%;
            top:105px;
            left:20px;
        }
        span{
            font-size: 16px;
            font-weight: bold;
        }
    }
    .fans-focus{
        display:flex;
        justify-content:space-between;
        margin:10px 10px;
    }
    #sign{
        margin:40px 10px;
    }
}
</style>